<template>
  <div class="container">
    <div class="container_right">
      <div class="title">
        <div>请登录</div>
      </div>
      <div>
        <div class="input1">
          <input v-model="username" type="text" placeholder="手机号/昵称/邮箱" />
        </div>
        <div class="input2">
          <input v-model="password" type="password" placeholder="密码" />
        </div>
      </div>
      <div class="agreement">
        <el-checkbox class="custom-checkbox" v-model="agreementChecked">已阅读并同意账号用户协议和隐私政策</el-checkbox>
      </div>
      <div class="btn">
        <button type="button" @click="login">登录</button>
      </div>
      <div class="text">
        <a> <router-link to="/register">立即注册</router-link></a>
        <i>|</i>
        <router-link to="/home">返回首页</router-link>
      </div>
      <div class="third">
        <ul class="third_list">
          <li v-for="(path, index) in imagePaths" :key="index">
            <img :src="require('@/assets/images/login/' + path)" />
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
// 引入json文件
let login = require("@/assets/data/login.json");

export default {
  name: "login",
  data() {
    return {
      username: "",
      password: "",
      agreementChecked: false,
      imagePaths: login.imagePaths,
    };
  },
  methods: {
  login() {
    // 判断是否勾选协议
    if (this.agreementChecked) {
      // 发送登录请求
      this.$axios({
        method: "post",
        url: "http://106.52.94.26:3001/user/login",
        data: {
          username: this.username,
          password: this.password,
        },
      })
        .then((res) => {
          if (res.data.code == "200") {
            // 登录成功，显示成功提示信息
            this.$message({
              message: res.data.msg,
              type: "success",
            });
          }
   
          // 处理登录成功后的逻辑
          if (res.status==200) {
            //1、储存token(令牌)   保存到浏览器
            window.sessionStorage.setItem("token", res.data.token);
            //2、储存user
            window.sessionStorage.setItem(
              "user",
              JSON.stringify(res.data.user)
            );
            //3、跳转到后台主页 （编程式导航）
            this.$router.push("./home"); //
          }
        })
        .catch(() => {
          // 登录失败，显示提示信息
          this.$message({
            message: "该账号未注册，请注册后，再登录！",
            type: "error",
          });
        });
    } else {
      // 未勾选协议，不执行登录逻辑
      this.$message({
        message: "请同意用户协议和隐私政策！",
        type: "error",
      });
    }
  },
}

};
</script>

<style scoped>
/* 中部 */
.container {
  height: 590px;
  margin-top: 43px;
  display: flex;
  justify-content: space-evenly;
}

.container_right {
  margin-top: 40px;
  width: 420px;
  height: 500px;
  background: #fff;
  box-shadow: 0 6px 20px 0 rgba(37, 43, 50, 0.07);
  border-radius: 16px;
  padding: 0 40px;
  border: 1px solid #f9f9f9;
}

.title {
  margin-top: 40px;
  font-size: inherit;
  font-weight: 400;
  font-size: 18px;
  line-height: normal;
  display: flex;
  justify-content: center;
  justify-content: space-evenly;
  font-family: MicrosoftYaHeiSemibold;
  letter-spacing: 0;
  line-height: 17px;
}

.input1 {
  margin-top: 38px;
}

.input2 {
  margin-top: 28px;
}

.input1,
.input2 {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.input1 input,
.input2 input {
  background: #f9f9f9;
  width: 348px;
  height: 52px;
  border-radius: 4px;
  padding: 0 16px;
  font-family: MicrosoftYaHei;
  font-size: 15px;
  color: #828282;
}

.input1 input:focus,
.input2 input:focus {
  border: 1px solid #ff5c00;
}

.agreement {
  margin-top: 25px;
  display: flex;
  justify-content: space-around;
  font-size: 12px;
  color: #151515;
  text-align: center;
  line-height: 12px;
  cursor: pointer;
  margin-bottom: 10px;
}

.custom-checkbox .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #ff5c00;
  border-color: #ff5c00;
}

.custom-checkbox .el-checkbox__input.is-checked+.el-checkbox__label {
  color: #ff5c00;
}

.custom-checkbox .el-checkbox__input:hover .el-checkbox__inner {
  border-color: #ff5c00;
}

.btn button {
  display: block;
  text-align: center;
  background-image: linear-gradient(90deg, #fe5447, #ff5c00);
  box-shadow: 0 3px 8px 1px rgba(235, 28, 49, 0.22);
  border-radius: 5px;
  width: 340px;
  height: 50px;
  line-height: 50px;
  font-family: MicrosoftYaHeiSemibold;
  font-size: 18px;
  color: #fff;
}

.text {
  margin-top: 28px;
  width: 340px;
  padding: 0 75px;
  display: flex;
  justify-content: center;
  justify-content: space-evenly;
  font-family: MicrosoftYaHei;
  font-size: 13px;
  color: #626262;
  letter-spacing: 0;
  line-height: 14px;
}

.third_list {
  margin-top: 30px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.third_list img {
  width: 35px;
  height: 35px;
}
</style>